<template>
	<div class="left-side">
		<el-form id="biao" style="padding: 0px;width: 100%;border: 0px;">
			<el-input type="text" placeholder="内容" v-model="username"
				style="margin-top: 30px;padding: 0px;width: 100%;height: 50px;border: 0px;">
				<template #prefix>
					<el-icon>
						<User />
					</el-icon>
				</template>
			</el-input>
			<el-button type="success" round id="login" @click="addItem" style="margin-top: 30px;
				text-align: center;font-size: 30px;padding: 10px;width: 100%;height: 50px;padding: 0px;border: 0px;">添加学习内容
			</el-button>
		</el-form>
		<el-form id="biao" style="padding: 0px;width: 100%;border: 0px;">
			<el-input type="text" placeholder="内容" v-model="zuijia"
				style="margin-top: 30px;padding: 0px;width: 100%;height: 50px;border: 0px;">
				<template #prefix>
					<el-icon>
						<User />
					</el-icon>
				</template>
			</el-input>
			<el-button type="success" round id="login" @click="editItem" style="margin-top: 30px;
				text-align: center;font-size: 30px;padding: 10px;width: 100%;height: 50px;padding: 0px;border: 0px;">修改学习内容
			</el-button>
		</el-form>
	</div>
</template>
<script setup>
	import {
		wcao,
		post
	} from "@/http";
	import {
		User,
		Lock
	} from "@element-plus/icons-vue";
	import {
		ref,
		computed,
		reactive
	} from 'vue'
	import {
		ElMessage
	} from "element-plus";

	const username = ref("");
	const zuijia = ref("");
	const addItem = () => {
		// 实现新增逻辑
		if (username.value == "" || username.value == null) {
			ElMessage.warning("请输入学习内容")
		} else {
			post('/learn/xue', {
				nr: username.value
			}, (msg) => {
				console.log('接收到后端的返回数据:' + msg);
				window.location.reload();
			}, (msg) => {
				ElMessage.warning(msg)
			})
		}
	};

	const editItem = () => {
		// 实现追加逻辑
		if (zuijia.value == "" || zuijia.value == null) {
			ElMessage.warning("请输入追加学习内容")
		} else {
			post('/learn/zuijia', {
				nr: zuijia.value
			}, (msg) => {
				console.log('接收到后端的返回数据:' + msg);
				window.location.reload();
			}, (msg) => {
				ElMessage.warning(msg)
			})
		}
	};
</script>

<style scoped>
	.left-side {
		width: 100%;
		background-color: burlywood;
		position: relative;
	}


	table {
		width: 100%;
		display: inline-block;
		padding: 0px;
		position: relative;
	}


	tr th:nth-child(1) {
		width: 15%;
	}

	tr td:nth-child(1) {
		width: 15%;
	}

	tr {
		border-radius: 10px;
	}

	th,
	td {
		width: 100%;
		border: 1px solid seagreen;
		padding: 8px;
		border-radius: 10px;
	}

	.left-side {
		margin-bottom: 20px;
	}

	table th {
		background-color: #95d475;
	}

	table tr:nth-child(even) {
		background-color: #deb887;
	}

	/* 调整表格边框样式 */
	th,
	td {
		border-color: #ddd;
		/* 边框颜色 */
	}
</style>